//
//  WIFI.hpp
//  WiFi_Config
//
//  Created by 伍阳阳 on 2021/1/7.
//  Copyright © 2021 伍阳阳. All rights reserved.
//

#ifndef WIFI_hpp
#define WIFI_hpp


#include <stdio.h>
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <ArduinoJson.h>
#include <DNSServer.h>
#include "LittleFS.h"
#include <string>

#define PIN_LED LED_BUILTIN
 const byte DNS_PORT = 53;
using namespace std;

class WIFI{
private:
    enum Status{
        CONNECT_INIT, //初始话
        CONNECT_NOSSID, //没有密码
        CONNECT_LOADING, //连接中
        CONNECT_SUCCESS, //连接完成
        CONNECT_FAIL, //连接失败
        CONNECT_OK,//完成
        
    };
    Status types;
    DNSServer *dnsServer; //DNS
    
    ESP8266WebServer *Webserver;//数据端口
    const  char * local_ssid; //ap的wifi名称
     const  char * local_pwd; //ap的wifi密码
    const char* file_name = "/taichi-maker/wifi.txt";  //闪存保存的位置
    WiFiEventHandler wl_no_ssid_handler;
    bool IS_SHOW_HIDE_WIFI;
    void (*callback)(void) = NULL;//定一个名为call的参数为空的函数指针 回调函数
    
public:
    WIFI();
    ~WIFI();
    void Start();
    void Start(const char* ssid,const char* pwd);
    void setLocalWifiName(const char * wifi_ssid);
    void setLocalWifiPwd(const char * wifi_pwd);
    void noled();
    void connect_loading_led();
    void connect_success_led();
    void init();
    void create_wifi();
    void connect_success();
    void read_ssid();
    void save_ssid(const char* ssid,const char* pwd);
    File readCache();
    void setCallBack(void (*fun)(void));
    void saveCache(const char* data);
    void removeCache();
    void connect_wifi(const char* ssid,const char* pwd);
    void onEvent();
    void loop();
    void restart();
    void webview_start();
    void webview_getlist();
    void webview_connect();
    void webview_gettype();
    
    String wifi_type(int typecode);
private:
   
    string webs_html="<!DOCTYPE html>html>\n\
    <head>\n\
    <meta charset='utf-8'>\n\
            <meta name='viewport' content='width=device-width,initial-scale=1'>\n\
            <title>登录家庭WiWi页面</title>\n\
            <style>\n\
                body,html {\n\
                    padding: 0px;\n\
                    margin: 0px;\n\
                    width: 100%;\n\
                    background: white;\n\
                }\n\
                #title {\n\
                    width: 100%;\n\
                    background: darkblue;\n\
                    text-align: center;\n\
                    box-shadow: #00008B 1px 2px 10px;\n\
                    margin-bottom:20px ;\n\
                    box-sizing: border-box;\n\
                    position: fixed;\n\
                    top: 0;\n\
                    left: 0;\n\
                    \n\
                }\n\
                #title p {\n\
                    margin: 0px;\n\
                    padding: 10px;\n\
                    color: white;\n\
                }\n\
    #type{\n\
         margin-top: 60px;\n\
    }\n\
                #getList{\n\
                    margin-top: 20px;\n\
                    padding: 10px 30px;\n\
                    border-radius: 20px;\n\
                    border: solid 1px  #D0D0D0;\n\
                    background: darkblue;\n\
                    color: white;\n\
                    margin-bottom: 20px;\n\
                }\n\
                #getgetList:active{\n\
                    background: #757575;\n\
                }\n\
                #content{\n\
                    display: flex;\n\
                    flex-direction: column;\n\
                    align-items: center;\n\
                }\n\
                ul,li{ padding:0;margin:0;list-style:none}\n\
                #list_view{\n\
                    width: 100%;\n\
                \n\
                }\n\
                .list_item{\n\
                    display: flex;\n\
                    flex-direction: row;\n\
                    padding: 0px 20px;\n\
                    justify-content: space-between;\n\
                    border-bottom: solid #D0D0D0 1px;\n\
                     color: black;\n\
                }\n\
                .list_item p{\n\
                    font-size: 14px;\n\
                }\n\
                .list_item:active{\n\
                    background: #999999;\n\
                    color: white;\n\
                }\n\
                #circle{\n\
                    width: 100px;\n\
                    height: 100px;\n\
                    border:solid darkblue 1px;\n\
                    position: relative;\n\
                    margin-top: 50px;\n\
                     display: none;\n\
                }\n\
                #circle div{\n\
                    width: 50px;\n\
                    height: 50px;\n\
                    background: darkblue;\n\
                    position: absolute;\n\
                    animation: move 3s linear infinite;\n\
                    \n\
                }\n\
                @keyframes move{\n\
                    0%{\n\
                        left: 0px;top: 0px;\n\
                        border-radius: 0px;\n\
                        }\n\
                    25%{\n\
                        left: 50px;top: 0px;\n\
                        border-radius: 25px;\n\
                        }\n\
                    50%{\n\
                        left: 50px;top: 50px;\n\
                        border-radius: 0px;\n\
                        }\n\
                        75%{\n\
                            left: 0px;top: 50px;\n\
                            border-radius: 55px;\n\
                            }\n\
                        100%{\n\
                            left: 0px;top: 0px;\n\
                            border-radius: 0px;\n\
                        }\n\
                     \n\
                }\n\
                \n\
            </style>\n\
        </head>\n\
        <body>\n\
            <div id='title'>\n\
                <p>选择WIFI登录</p>\n\
            </div>\n\
            <div id='content'>\n\
                <div id='type'></div>\n\
                <button id='getList' type='button' onclick='getWifiList()'>获取列表</button>\n\
                <div id='message'></div>\n\
                <ul id='list_view'>\n\
                \n\
                </ul>\n\
                    <div id='circle'>\n\
                        <div></div>\n\
                    </div>\n\
            </div>\n\
            <script >\n\
                 var interiner;\n\
                var isRequest=false;\n\
                 var isonClick = false;\n\
                function getWifiList(){\n\
                    if(isonClick){\n\
                        return;\n\
                    }\n\
                    isRequest=false;\n\
                    getid('message').innerHTML='';\n\
                    getid('list_view').innerHTML = '';\n\
                    getid('getList').innerHTML='正在获取';\n\
                    getid('circle').style.display ='block';\n\
                    let xmlhttp = new XMLHttpRequest();\n\
                    let requestString = '/getList';\n\
                    xmlhttp.onload = e => {\n\
                        console.log('request success');\n\
                        console.log(e);\n\
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {\n\
                            getid('circle').style.display = 'none';\n\
                            let req = xmlhttp.responseText;\n\
                            console.log(req);\n\
                            req = JSON.parse(req);\n\
                            let code  = req['code'];\n\
                            let data = req['response'];\n\
                            if(code=='200'){\n\
                                getid('getList').innerHTML='重新获取';\n\
                                isonClick=false;\n\
                                for(let i =0;i<data.length;i++){\n\
                                    var para = document.createElement('li');\n\
                                    para.classList.add('list_item');\n\
                                    para.setAttribute('onclick', 'connect(ssid_name' + i + ')');\n\
                                    para.id = 'ssid' + i;\n\
                                    para.innerHTML = '<p id=ssid_name' + i +'>' + data[i].ssid + '</p><p>'\n\ +data[i].type + '</p>';\n\
                                    var ssidElement = getid('list_view');\n\
                                    ssidElement.appendChild(para);\n\
                                }\n\
                            }else{\n\
                                getid('getList').innerHTML='重新获取';\n\
                                getid('circle').style.display ='none';\n\
                                isonClick=false;\n\
                            }\n\
                        }else{\n\
                            getid('getList').innerHTML='重新获取';\n\
                            getid('circle').style.display ='none';\n\
                            isonClick=false;\n\
                        }\n\
                    };\n\
                    xmlhttp.onerror = e => {\n\
                        getid('getList').innerHTML='重新获取';\n\
                        getid('circle').style.display ='none';\n\
                        isonClick=false;\n\
                        getWifiList();\n\
                    };\n\
                    xmlhttp.ontimeout = e => {\n\
                        getid('getList').innerHTML='重新获取';\n\
                        getid('circle').style.display ='none';\n\
                        isonClick=false;\n\
                        getWifiList();\n\
                    };\n\
                    xmlhttp.open('GET', requestString, true);\n\
                    xmlhttp.send(null);\n\
                }\n\
                function getid(id) {\n\
                    return document.getElementById(id);\n\
                };\n\
                var pass=undefined;\n\
                function connect(index){\n\
                    var ssidElement;\n\
                    ssidElement = document.getElementById(index.id);\n\
                    if(pass==undefined){\n\
                        passs= prompt(ssidElement.innerText);\n\
                    }\n\
                    if ((passs != null) && (passs != '')) {\n\
                        getid('message').innerHTML='';\n\
                        isonClick=true;\n\
                        getid('list_view').innerHTML = '';\n\
                        getid('circle').style.display ='block';\n\
                        var xmlhttp = new XMLHttpRequest();\n\
                        var requestString = '/connect?ssid=' + ssidElement.innerHTML + '&password=' + passs;\n\
                        xmlhttp.onload = e => {\n\
                            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {\n\
                                pass = undefined;\n\
                                var req = xmlhttp.responseText;\n\
                                 console.log(req);\n\
                                 req = JSON.parse(req);\n\
                                 let code  = req['code'];\n\
                                 let data = req['response'];\n\
                                 if(code == '200'){\n\
                                     getid('type').innerHTML='连接wifi中...';\n\
                                     getid('circle').style.display ='block';\n\
                                     getid('getList').style.display = 'none';\n\
                                        isRequest= true;\n\
                                 }else{\n\
                                     getid('message').innerHTML=data;\n\
                                 }\n\
                                 isonClick=false;\n\
                                 getid('getList').innerHTML='重新获取wifi列表';\n\
                                 getid('circle').style.display ='none';\n\
                            }\n\
                        }\n\
                        xmlhttp.onerror = e => {\n\
                            console.log('request error');\n\
                            isonClick=false;\n\
                            getid('getList').innerHTML='重新获取';\n\
                            getid('circle').style.display ='none';\n\
                        };\n\
                        xmlhttp.ontimeout = e => {\n\
                            alert('request timeout');\n\
                            console.log('request timeout');\n\
                            isonClick=false;\n\
                            getid('getList').innerHTML='重新获取';\n\
                            getid('circle').style.display ='none';\n\
                        };\n\
                        xmlhttp.open('GET', requestString, true);\n\
                        xmlhttp.send(null);\n\
                    }else{\n\
                        alert('请输入wifi密码!');\n\
                    }\n\
                }\n\
                interiner=setInterval(function(){\n\
                    if(isRequest){getType();}\n\
                        },3000);\n\
                function getType(){\n\
                    var xmlhttp = new XMLHttpRequest();\n\
                    var requestString = '/type';\n\
                    xmlhttp.onload = e => {\n\
                            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {\n\
                                position =undefined;\n\
                                pass = undefined;\n\
                                var req = xmlhttp.responseText;\n\
                                 console.log(req);\n\
                                 req = JSON.parse(req);\n\
                                 let code  = req['code'];\n\
                                 let data = req['response'];\n\
                                 if(code == '200'){\n\
                                    isRequest=false;\n\
                                     getid('type').innerHTML='连接wifi成功!';\n\
                                 }else if(code == '300'){\n\
                                     getid('type').innerHTML='连接wifi中.....';\n\
                                     getid('list_view').innerHTML = '';\n\
                                     getid('circle').style.display ='block';\n\
                                     getid('getList').style.display = 'none';\n\
                                 }else{\n\
                                    getid('type').innerHTML='连接wifi失败';\n\
                                    getid('list_view').innerHTML = '';\n\
                                     getid('circle').style.display ='none';\n\
                                     getid('getList').style.display = 'block';\n\
                                    getid('getList').innerHTML = '重新获取列表';\n\
                                 }\n\
                            }\n\
                        }\n\
                        xmlhttp.onerror = e => {\n\
                            console.log('request error');\n\
                             getid('type').innerHTML='网络错误.....';\n\
                              getid('list_view').innerHTML = '';\n\
                            getid('circle').style.display ='none';\n\
                            getid('getList').style.display = 'block';\n\
                        };\n\
                        xmlhttp.ontimeout = e => {\n\
                            alert('request timeout');\n\
                            getid('type').innerHTML='连接超时.....';\n\
                              getid('list_view').innerHTML = '';\n\
                            getid('circle').style.display ='none';\n\
                            getid('getList').style.display = 'block';\n\
                        };\n\
                        xmlhttp.open('GET', requestString, true);\n\
                        xmlhttp.send(null);\n\
                }\n\
            </script>\n\
        </body>\n\
    </html>\n\
        ";
};
#endif /* WIFI_hpp */
